<template>
	<view class="loading-box">
		<image src="/static/loading.gif" class="loading" v-show="status=='loading'"></image>
		<image src="/static/nomore.png" class="nomore" v-show="status=='noMore'"></image>
		<text class="text" v-show="status=='more'" :style="{color:color}">{{contentText}}</text>
	</view>
</template>

<script>
	export default {
		name: "uni-load-more",
		props: {
			status: {
				//上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
				type: String,
				default: 'more'
			},
			color: {
				type: String,
				default: "#000000"
			},
			contentText: {
				type: String,
				default: "上拉显示更多"
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="less">
	@charset "UTF-8";

	.loading-box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		.loading {
			width: 72rpx;
			height: 72rpx;
		}
	
		.nomore {
			width: 209rpx;
			height: 120rpx;
		}
	
		.text {
			font-size: 26rpx;
			color: black;
		}
	}
</style>